import { useAppDispatch, useAppSelector } from "@todos/hooks/redux";
import { clearDone } from "@todos/store/todoSlice";

export function TodoFooter() {
  const todos = useAppSelector((state) => state.todos.todos);
  const doneCount = todos.filter((todo) => todo.isDone).length;
  const totalCount = todos.length;

  const dispatch = useAppDispatch();

  return (
    <section className="flex flex-row justify-between items-center">
      <div className="text-sm text-gray-600">
        {doneCount} done / {totalCount} total
      </div>
      <button
        disabled={doneCount === 0}
        onClick={() => dispatch(clearDone())}
        className={`px-4 py-2 rounded-lg ${
          doneCount > 0 ? "bg-pink-500 text-white" : "bg-gray-200"
        }`}
      >
        Clear Done
      </button>
    </section>
  );
}
